<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'
</script>

<template>
  <view>
    <view class="count-bar mt-3 rounded-lg p-[10px]">
      <view class="flex flex-col p-[10px]">
        <wd-text text="收款合计（元）" size="14px" color="#fff" />
        <wd-text text="15,200.00" size="32px" color="#fff" />
      </view>
      <view class="w-full overflow-hidden rounded-lg bg-white">
        <wd-grid :column="2" border>
          <wd-grid-item use-slot>
            <view class="flex flex-col items-start pl-4">
              <wd-text text="营业收入" size="14px" />
              <wd-text text="10,000.00" color="#333" size="16px" bold />
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="flex flex-col items-start pl-4">
              <wd-text text="会员充值" size="14px" />
              <wd-text text="10,000.00" color="#333" size="16px" bold />
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="flex flex-col items-start pl-4">
              <wd-text text="挂账还款" size="14px" />
              <wd-text text="10,000.00" color="#333" size="16px" bold />
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="flex flex-col items-start pl-4">
              <wd-text text="定金收退" size="14px" />
              <wd-text text="10,000.00" color="#333" size="16px" bold />
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot>
            <view class="flex flex-col items-start pl-4">
              <wd-text text="权益包售卖" size="14px" />
              <wd-text text="10,000.00" color="#333" size="16px" bold />
            </view>
          </wd-grid-item>
        </wd-grid>
      </view>
    </view>
    <!--    门店收款排行 start -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="门店收款排行" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view class="px-[15px] py-[10px]">
        <wd-radio-group shape="button">
          <wd-radio value="1">收款小计</wd-radio>
          <wd-radio value="2">营业收入</wd-radio>
          <wd-radio value="3">会员充值</wd-radio>
          <view class="mt-2 inline-block">
            <wd-radio value="4">挂账还款</wd-radio>
          </view>
          <view class="mt-2 inline-block">
            <wd-radio value="5">订金收退</wd-radio>
          </view>
          <view class="mt-2 inline-block">
            <wd-radio value="6">权益包售卖</wd-radio>
          </view>
        </wd-radio-group>
      </view>
      <view
        class="mx-[15px] my-2 flex items-center justify-between rounded-lg bg-[#F7F8F9] p-[10px]"
      >
        <wd-text text="收款总计(元)" color="#333" />
        <wd-text text="1,042.02" color="#333" />
      </view>
      <view class="mt-3">
        <wd-cell-group border>
          <wd-cell title="川妹子烤鱼(上地店)" value="10,000.00 元">
            <template #icon>
              <view class="mr-1">
                <wd-text text="1" color="#d9001b" />
              </view>
            </template>
          </wd-cell>
          <wd-cell title="川妹子烤鱼(望京店)" value="10,000.00 元">
            <template #icon>
              <view class="mr-1">
                <wd-text text="2" color="#f59a23" />
              </view>
            </template>
          </wd-cell>
          <wd-cell title="川妹子烤鱼(中关村店)" value="10,000.00 元">
            <template #icon>
              <view class="mr-1">
                <wd-text text="3" color="#b8751a" />
              </view>
            </template>
          </wd-cell>
        </wd-cell-group>
        <view class="px-[15px]">
          <uv-line />
        </view>
        <view class="px-[15px] py-[10px] text-right">
          <wd-text text="查看全部" size="14px">
            <template #suffix>
              <wd-icon name="arrow-right" size="14px" />
            </template>
          </wd-text>
        </view>
      </view>
    </view>
    <!--    门店收款排行 end -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="门店构成" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
      <view class="px-[15px] py-[10px]">
        <wd-radio-group shape="button">
          <wd-radio value="1">收款小计</wd-radio>
          <wd-radio value="2">营业收入</wd-radio>
          <wd-radio value="3">会员充值</wd-radio>
          <view class="mt-2 inline-block">
            <wd-radio value="4">挂账还款</wd-radio>
          </view>
          <view class="mt-2 inline-block">
            <wd-radio value="5">订金收退</wd-radio>
          </view>
          <view class="mt-2 inline-block">
            <wd-radio value="6">权益包售卖</wd-radio>
          </view>
        </wd-radio-group>
      </view>
      <view
        class="mx-[15px] my-2 flex items-center justify-between rounded-lg bg-[#F7F8F9] p-[10px]"
      >
        <wd-text text="收款总计(元)" color="#333" />
        <wd-text text="1,042.02" color="#333" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.count-bar {
  background: linear-gradient(to bottom, #ff3535, #f5f9fa) no-repeat;
}
</style>
